<template>
  <div class="view-list-wrap">
    <div class="view-info" v-for="item in this.viewList" :key="item.id">
      <router-link :to="{path: '/detail', query: {field: 'view', id: item.id}}">
        <div class="info-img-wrap">
          <img class="info-img" :src="item.img" />
        </div>
        <h1 class="info-name">{{item.name}}</h1>
        <star :star-info="{star:item.star,score:item.score}"></star>
        <p class="info-bottom">
          <span class="info-bottom-char">￥</span>
          <span class="info-bottom-price">{{item.default_price}}</span>
          <span class="info-bottom-price-unit">起</span>
          <span class="info-bottom-address">{{item.city_name}}</span>
        </p>
      </router-link>
    </div>
  </div>
</template>

<script>
  import Star from 'components/ScrollWrapper/Sub/Star.vue';

  export default {
    name: 'ViewList',
    props: {
      viewList: Array
    },
    components: {
      Star
    }
  }
</script>

<style lang="scss" scoped="scoped">
  @import '~styles/mixins.scss';
  @import '~styles/variables.scss';

  .view-list-wrap {
    overflow: hidden;
    height: 100%;
    background-color: #FFFFFF;

    .view-info {
      @include flex-column;
      float: left;
      width: 50%;
      padding: .05rem;
      box-sizing: border-box;

      .info-img-wrap {
        width: 100%;
        height: 1.1rem;
        overflow: hidden;

        .info-img {
          width: 100%;
          min-height: 1.1rem;
        }
      }

      .info-name {
        @include ellipsis;
        font-size: .16rem;
        color: #000;
        padding: .05rem 0 .05rem 0;
      }

      .info-bottom {
        position: relative;
        @include flex-row;
        margin-top: .1rem;
        align-items: center;

        span {
          font-size: .15rem;
          color: #000;
        }

        .info-bottom-price {
          color: $defaultGreen;
          margin-left: .1rem;
          font-size: .2rem;
        }

        .info-bottom-price-unit {
          margin-left: .1rem;
        }

        .info-bottom-address {
          position: absolute;
          right: 0;
        }
      }
    }
  }
</style>
